<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .red{
            color:red;
        }
        .green{
            color: green;
        }
    </style>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div id="root"></div>
</body>
<script>
    // data & methods & computed & watcher
    const app = Vue.createApp({
        data(){
            return {
                classString: "red",
                classBinfd: "class",
                classObject: {red:true, green:true},
                classArray:['green',{brown:true}],
                styleString: 'color:yellow',
                styleObject:{color:'orange', background:'red'}
            }
        },
        watch:{
         
        },
        computed: {
           
        },
        methods: {
           
        },
        template:
        `
           <div :[classBinfd]="classArray">hello world</div>
           <demo :class="classObject"/>
           <div :style="styleObject">style</div>
        `
    });

    app.component('demo', {
        template: `
            <div :class="$attrs.class">
                <div :class="$attrs.class">double</div>
            </div>
            
        `
    });

    const vm = app.mount("#root");
</script>
</html>